function readJSON() {
    // Check if the hikes object exists in local storage
    let Storages = localStorage.getItem('Storages');
    if (!Storages) {
        document.getElementById('StorageCards').innerHTML = '<p>No hikes found.</p>';
    } else {
        Storages = JSON.parse(Storages);
        // Iterate over the hikes and create Bootstrap cards dynamically
        Storages.Storages.forEach(Storage => {
            // Create card elements
            const card = document.createElement('div');
            card.classList.add('card', 'col-md-4');
            const cardBody = document.createElement('div');
            cardBody.classList.add('card-body');

            const title = document.createElement('h5');
            title.classList.add('card-title');
            title.textContent = Storage.Storage;


            const Target = document.createElement('p');
            Target.classList.add('card-text');
            Target.textContent = 'Target: ' + Storage.Target;

            // Append elements to the card
            cardBody.appendChild(title);
            cardBody.appendChild(Target);
            card.appendChild(cardBody);
            // Append card to the container
            document.getElementById('StorageCards').appendChild(card);
        });
    }
}
readJSON();